<template>
  <div style="margin: auto;width: 1200px">
    <AddHead/>

    <el-tabs :tab-position="tabPosition" style="height: 800px;margin-top: 20px;">
      <el-tab-pane label="我的账号" class="box-font" style="color: red">
        <div class="wdzc">
          <h1>我的资产</h1>
          <hr/>
          <div class="gezy">
            <div class="ues">
              <img src="http://thirdqq.qlogo.cn/g?b=oidb&t=1651308557&k=icGbEwPdBqjalbVXSicCicxRw&s=100" class="tx">
              <p style="position: absolute;right: 900px">
                异端
              </p>
              <div style="width:400px;height: 60px;float: right;margin-left: 20px;">
                <div style="width: 100px;height: 60px;float: left;margin-top: -15px;text-align: center;">
                  <p style="margin-left: 0px;">梦币</p>
                  <span>1</span>
                </div>
                <div style="width: 50px;height: 60px;float: left;text-align: center;">
                  <p style="margin-left: 10px;float: left;margin-top: 0px;">梦币</p>
                  <span>1</span>
                </div>
                <el-button style="margin-left: 30px;float: left;margin-top: 10px">充值</el-button>
              </div>
            </div>
          </div>

          <h1 style="margin-top: 70px">交易记录</h1>
          <span>交易记录可能存在延时，仅供参考，请以实际金额变化为准</span>
          <el-tabs :tab-position="stabPosition" style="height: 400px;">
            <el-tab-pane label="消费记录">
              <el-empty description="暂无记录"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="充值记录">
              <el-empty description="暂无记录"></el-empty>
            </el-tab-pane>

          </el-tabs>
        </div>
      </el-tab-pane>
      <el-tab-pane label="系统消息" class="wdzc">
        <h1>系统消息</h1>
        <hr/>
        <el-empty description="暂无消息"></el-empty>
      </el-tab-pane>
      <el-tab-pane label="安全中心" class="wdzc">
        <h1>安全中心</h1>
        <hr/>
        <div class="bdyx">
          <el-row>
            <span>绑定邮箱</span><br/>
            <span>绑定邮箱帐号，及时接收订单、审核等重要信息</span>
            <p>
              <el-input style="width: 250px"
                placeholder="已绑定邮箱1418327005@qq.com"
                v-model="input"
                :disabled="true">
              </el-input>
              <el-button>修改邮箱</el-button>
            </p>
          </el-row>
        </div>
        <div class="bdyx">
          <el-row>
            <span>绑定手机</span><br/>
            <span>绑定手机号，提高账户安全性</span>
            <p>
              <el-input style="width: 250px"
                        placeholder="已绑定手机号15712051241"
                        v-model="input"
                        :disabled="true">
              </el-input>
              <el-button>修改手机号</el-button>
            </p>
          </el-row>
        </div>
        <div class="bdyx">
          <el-row>
            <span>账户密码</span><br/>
            <span>定期修改密码有助于账户安全</span>
            <p>
              <el-button style="width: 300px">修改手机号</el-button>
            </p>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>


    <AddTail/>
  </div>
</template>

<script>
export default {
  name: "BookUser",
  data() {
    return {
      tabPosition: 'left',
      stabPosition: 'top',
    }
  }
}
</script>

<style scoped>
.wdzc {
  width: 800px;
  margin-left: 50px;
}

.gezy {
  width: 800px;
  height: 100px;
  margin: auto;
  border-radius: 20px;
  margin-top: 30px;
  background: linear-gradient(70deg, #00afff, pink);
}

.tx {
  width: 60px;
  height: 60px;
  margin-left: 20px;
  border-radius: 50%;
  float: left;
}

.ues {
  width: 800px;
  height: 60px;
  float: left;
  margin-top: 20px;
}

.bdyx {
  width: 900px;
  height: 150px;
}
</style>
